<script setup>
import { ref, reactive, watch } from "vue";
import {formatDateTimeArray} from "@/utils";

const props = defineProps({
  modelValue: {
    type: String || Number,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
})

const emit = defineEmits(['update:modelValue'])
const showPopup = ref(false)

watch(
    () => props.modelValue,
    (nv, ov) => {
      iptValue.value = nv
    }
)

const handlePopup = () => {
  showPopup.value = true
}

const popupConfirm = (v) => {
  console.log('confirmDate', v, formatDateTimeArray(v.selectedValue))
  showPopup.value = false
  iptValue.value = formatDateTimeArray(v.selectedValue)
  emit('update:modelValue', formatDateTimeArray(v.selectedValue))
}
const iptValue = ref('')
</script>

<template>
  <nut-input v-model="iptValue" disabled :placeholder="placeholder" type="text" @click="handlePopup" />
  <nut-popup position="bottom" v-model:visible="showPopup">
    <nut-date-picker
        :value="modelValue"
        title="日期时间选择"
        type="datetime"
        :min-date="new Date()"
        :three-dimensional="false"
        @confirm="popupConfirm"
    ></nut-date-picker>
  </nut-popup>
</template>

<style scoped lang="scss">

</style>
